<template>
	<view>
		<u-navbar back-text="返回" title="课程详情"
					:background="{background:'#2979ff'}" 
					back-icon-color="#fff" 
					title-color="#fff"
					:back-text-style="{color:'#fff'}"
		>
			<view slot="right" style="padding-right: 20rpx;">
				<u-icon name="plus" size="40" color="#fff" @click="add"></u-icon>
			</view>
		</u-navbar>
				
		<form class="flowform" @reset="reset">
			
			<!-- <view class="swiper-back">
				<banner :swiperImg="swiperImg"></banner>
			</view> -->
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>基地</label></view>
					<view class="controlvalue">
						<label>上海博物馆</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>课程</label></view>
					<view class="controlvalue">
						<label>宝塔乾坤</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>学生</label></view>
					<view class="controlvalue">
						<u-button shape="square" size="mini">小学</u-button>
						<u-button shape="square" size="mini" type="primary">中学</u-button>
						<u-button shape="square" size="mini" type="success">高中</u-button>
					</view>
				</view>
			</view>
						
						
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>时间</label></view>
					<view class="controlvalue">
						<label>09:00~17:00</label>
					</view>
				</view>
			</view>
			
			<view class="formlist inputtext">
				<view class="formgroup border-bottom-E3E3E5">
					<view class="labletitle"><label>地址</label></view>
					<view class="controlvalue">
						<label>上海市黄浦区人民大道201号</label>
					</view>
				</view>
			</view>
					
			<!-- 参考网站 https://blog.csdn.net/YY_ain/article/details/123391460 -->
			<template>
			    <view>
			        <view class="wrap">
			            <view class="u-tabs-box">
			                <u-tabs-swiper activeColor="#f29100" ref="tabs" :list="list" :current="current" @change="change" :is-scroll="false" swiperWidth="750" ></u-tabs-swiper>
			            </view>
						
			            <swiper class="swiper-box" :current="swiperCurrent" @transition="transition" @animationfinish="animationfinish" style="height: calc(100vh - 65vh)">
			                
							<swiper-item class="swiper-item" >
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待付款</view> -->
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											
											<view class="item">
													<u-parse :html="content1"></u-parse>
											</view>
												
											
										</uni-swipe-action>
									</view>
								</view>
			                 
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                    <!-- <view >代发货</view> -->
								<view class="jn-grid-list margin-top-20" >
									<view class="jn-staff-list-cell">
										<uni-swipe-action>
											<view class="item">
													<u-parse :html="content2"></u-parse>
											</view>
										</uni-swipe-action>
									</view>
								</view>
			                           
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;">
			                    <!-- <view >待收货</view> -->
			                    <view class="jn-grid-list margin-top-20" >
			                    	<view class="jn-staff-list-cell">
			                    		<uni-swipe-action>
			                    			<uni-swipe-action-item v-for="(item,index) in staffs3"  :key="index" >
			                    				<view class="item" >
			                    					<view class="jn-item-cell">
			                    						<view class="jn-list-cell head">
			                    							<view class="jn-item-cell-title-left">
			                    								<view class="font-size32 color-3A3A3A">{{item.F_EnCode}}</view>
			                    							</view>
			                    						</view>
			                    						<view class="jn-list-cell cell">
			                    							<view class="jn-item-cell-left">
			                    								<view class="color-3A3A3A">CAS编号：</view>
			                    								<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Code}}</view>
																<view class="color-3A3A3A">申请用量：</view>
																<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Qty}}</view>
			                    							</view>
			                    						</view>
			                    						<view class="jn-list-cell cell">
			                    							<view class="jn-item-cell-left">
			                    								<view class="color-3A3A3A">危化品名称：</view>
			                    								<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Name}}</view>
																<view class="color-3A3A3A">用量单位：</view>
																<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Unit}}</view>
			                    							</view>
			                    						</view>
			                    					</view>
			                    				</view>
			                    			</uni-swipe-action-item>
			                    		</uni-swipe-action>
			                    	</view>
			                    </view>            
			                    </scroll-view>
			                </swiper-item>
							
			                <swiper-item class="swiper-item">
			                    <scroll-view scroll-y style="height: 100%;width: 100%;"   >
			                     <!-- <view >待评价</view> -->
			                     <view class="jn-grid-list margin-top-20" >
			                     	<view class="jn-staff-list-cell">
			                     		<uni-swipe-action>
			                     			<uni-swipe-action-item v-for="(item,index) in staffs4"  :key="index" >
			                     				<view class="item" >
			                     					<view class="jn-item-cell">
			                     						<view class="jn-list-cell head">
			                     							<view class="jn-item-cell-title-left">
			                     								<view class="font-size32 color-3A3A3A">{{item.F_EnCode}}</view>
			                     							</view>
			                     						</view>
			                     						<view class="jn-list-cell cell">
			                     							<view class="jn-item-cell-left">
			                     								<view class="color-3A3A3A">耗材编号：</view>
			                     								<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Code}}</view>
			                     								<view class="color-3A3A3A">申请用量：</view>
			                     								<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Qty}}</view>
			                     							</view>
			                     						</view>
			                     						<view class="jn-list-cell cell">
			                     							<view class="jn-item-cell-left">
			                     								<view class="color-3A3A3A">耗材名称：</view>
			                     								<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Name}}</view>
			                     								<view class="color-3A3A3A">用量单位：</view>
			                     								<view class="color-9A9A9A uni-ellipsis rightWidth">{{item.F_Unit}}</view>
			                     							</view>
			                     						</view>
			                     					</view>
			                     				</view>
			                     			</uni-swipe-action-item>
			                     		</uni-swipe-action>
			                     	</view>
			                     </view> 
			                    </scroll-view>
			                </swiper-item>
							
			            </swiper>
			        </view>
			    </view>
			</template>	
			
			<view class="buttom-box">
				<view class="flow-button">
					<button class="btn-same btn-keep"   @tap="submit">返回</button>
					<button class="btn-same btn-submit" @tap="submit">保存</button>
				</view>
			</view>
			
		</form>
		<w-picker :mode="mode" :pickerList="pickerList" ref="picker" :isSearchShow="isSearchShow"></w-picker>
		
		<!-- 日历 -->
		<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
	</view>
</template>

<script>
	import jnpf from '@/common/js/jnpf.js'
	import banner from '@/pages/index/banner/banner.vue'
	import uniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar.vue'
	
	export default {
		components: {
			banner,
			uniNoticeBar,
			// Tabar
		},
		data() {
			return {
				content1:'<p>简介<p>圆应塔作为上海市现存最高的古塔，也是上海清理发现文物最多的古塔，具有重要的历史、艺术和科学价值。在圆应塔塔刹顶部宝瓶和天宫、地宫内发现千余件文物，年代跨度从南朝至清代中晚期，其数量之多、品种之繁，在全国均属罕见。</p><img src="http://180.166.193.6:90/images/study/new4.jpg" />',
				content2:'<p>展期：2025-01-14 - 2025-03-02<p>展览地点：上海博物馆人民广场馆四楼第三展览厅<p> ',
				
				list: [
					{
						name: '课程详情',
						//count: 3
					},
					{
						name: '课程安排',
						//count: 2
					}
				],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				
				show: false,
				mode: 'date',
				datevalue: this.getdate(),
				
				staffList1: [],
				staffList2: [],
				staffList3: [],
				staffList4: [],
				
				multiple: false, //多选
				selectParent: false, //父级可选
				
				type: 'textarea',
				border: false,
				height: 100,
				autoHeight: true,
				staff: {
					billno:'K241130001',
					billcredate:'2025-01-06',
					billtime:'09:00~10:30',
					workingNature:'奉化学楼101',
					fullName: '宋江',
					node: '有机化学实验操作课',
					idNumber: '',
				},
				mode: '',
				isSearchShow:false,
				pickerList: [],
				isId:false,
				listId:''
			}
		},
		onLoad(e) {
			this.isId = Object.prototype.hasOwnProperty.call(e, 'id');
			this.listId = e.id;
			
			this.init();
		},
		computed: {
			//预约工位内容
			staffs1: function() {
				let search = this.search;
				let staffList = this.staffList1;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约设备内容
			staffs2: function() {
				let search = this.search;
				let staffList = this.staffList2;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约危化品内容
			staffs3: function() {
				let search = this.search;
				let staffList = this.staffList3;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			},
			//预约耗材内容
			staffs4: function() {
				let search = this.search;
				let staffList = this.staffList4;
				// console.log(staffList)
				if (search) {
					return staffList.filter(function(product) {
						return Object.keys(product).some(function(key) {
							return String(product[key]).toLowerCase().indexOf(search) > -1
						})
					})
				}
				return staffList
			}
		},
		onReady(){
					uni.getSystemInfo({
						success: (res) => {
							let topHeight = 100;
							let winHeight = (res.windowHeight * (750/res.windowWidth));
							// boxHeight为屏幕高度 - 顶部高度
							this.boxHeight = winHeight - topHeight + 'rpx';
						}
					});
				},
		methods: {
			getdate(){
			   //返回当前日期
			   let date = new Date();
			   let formattedDate = date.toLocaleDateString('zh-CN', { year: 'numeric', month: '2-digit', day: '2-digit' }); // 输出格式如 "2023-01-01"
			   console.log(formattedDate);
			   return formattedDate;
			},
			init() {
				var res={
					"data": {
						"code": 200,
						"msg": "Success",
						"data": {
							"list1": [
								{
									"enCode": "1",
									"fullCode": "1-1",
									"fullName": "1号工位"
								},
								{
									"enCode": "2",
									"fullCode": "1-2",
									"fullName": "2号工位"
								},
								{
									"enCode": "3",
									"fullCode": "1-3",
									"fullName": "3号工位"
								}
							  ],
							"list2": [
								{
									"enCode": "1",
									"fullCode": "98001",
									"fullName": "通风柜1-1"
								},
								{
									"enCode": "2",
									"fullCode": "98002",
									"fullName": "通风柜1-2"
								}
							  ],
							"list3": [
								{
									"enCode": "1",
									"fullCode": "557-18-6",
									"fullName": "二乙基镁",
									"fqty":300,
									"funit":"ml"
								},
								{
									"enCode": "2",
									"fullCode": "463-56-9",
									"fullName": "硫氰酸",
									"fqty":200,
									"funit":"ml"
								},
								{
									"enCode": "3",
									"fullCode": "692-45-5",
									"fullName": "甲酸乙烯酯",
									"fqty":100,
									"funit":"ml"
								}
							  ],
							"list4": [
								{
									"enCode": "1",
									"fullCode": "200001",
									"fullName": "医用口罩",
									"fqty":20,
									"funit":"个"
								},
								{
									"enCode": "2",
									"fullCode": "200002",
									"fullName": "医用手套",
									"fqty":20,
									"funit":"副"
								}
							  ],
							"pagination": {
								"currentPage": 1,
								"pageSize": 10,
								"total": 635
							}
						}
					},
					"statusCode": 200,
					"errMsg": "request:ok",
					"cookies": []
				}
				let staff1 = res.data.data.list1;
				this.staffList1=[];
				for (let i = 0; i < staff1.length; i++) {
					this.staffList1.push({
						'F_EnCode': staff1[i].enCode,
						'F_Code'  : staff1[i].fullCode,
						'F_Name'  : staff1[i].fullName
					})
				}
				
				let staff2 = res.data.data.list2;
				this.staffList2=[];
				for (let i = 0; i < staff2.length; i++) {
					this.staffList2.push({
						'F_EnCode': staff2[i].enCode,
						'F_Code'  : staff2[i].fullCode,
						'F_Name'  : staff2[i].fullName
					})
				}
				
				let staff3 = res.data.data.list3;
				this.staffList3=[];
				for (let i = 0; i < staff3.length; i++) {
					this.staffList3.push({
						'F_EnCode': staff3[i].enCode,
						'F_Code'  : staff3[i].fullCode,
						'F_Name'  : staff3[i].fullName,
						'F_Qty'   : staff3[i].fqty,
						'F_Unit'  : staff3[i].funit
					})
				}
				
				let staff4 = res.data.data.list4;
				this.staffList4=[];
				for (let i = 0; i < staff4.length; i++) {
					this.staffList4.push({
						'F_EnCode': staff4[i].enCode,
						'F_Code'  : staff4[i].fullCode,
						'F_Name'  : staff4[i].fullName,
						'F_Qty'   : staff4[i].fqty,
						'F_Unit'  : staff4[i].funit
					})
				}
				
			},
			
			open() {
				    console.log('消息提示');
			        uni.showToast({
			        	title: '新增弹窗',
			        	duration: 2000
			        });
			      },
			
			submit() {
				//console.log('返回上一页成功');
				// 在某个事件或条件下触发返回上一页操作
				uni.navigateBack({
				    delta: 1, // 返回的页面数，如果是1表示返回上一级页面，可以根据需求调整
				    success: function() {
				        console.log('返回上一页成功');
				    },
				    fail: function(error) {
				        console.error('返回上一页失败', error);
				    }
				});

			},
			reset(e) {
				//console.log('清空数据')
			},
			
			// tab栏切换
			change(index) {
				this.swiperCurrent = index;
				
			},
			transition({ detail: { dx } }) {
				this.$refs.tabs.setDx(dx);
			},
			animationfinish({ detail: { current } }) {
				this.$refs.tabs.setFinishCurrent(current);
				this.swiperCurrent = current;
				this.current = current;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f0f2f6;
	}
	
	.u-content {
			margin-top: 100rpx;
			color: $u-content-color;
			font-size: 32rpx;
			line-height: 1.8;
			
			// 标签形式无效
			p {
				color: $u-tips-color;
			}
		}
		
	.swiper-back {
		background: #3281FF !important;
		/* background: linear-gradient(to bottom, #4869EE 70%, #f0f2f6 30%) !important; */
		position: relative;
		height: calc(280rpx + 88rpx);
		margin-bottom: 80upx;
		
	}
</style>
